import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lh_shop_flutter/r.g.dart';
import 'package:lh_shop_flutter/view/search_view.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _gridData = [
    {'icon': R.image.icon_qingcang().assetName, 'title': '品牌清仓'},
    {'icon': R.image.icon_tuijian().assetName, 'title': '店铺推荐'},
    {'icon': R.image.icon_baoyou().assetName, 'title': '1.9包邮'},
    {'icon': R.image.icon_jifen().assetName, 'title': '积分专区'},
  ];

  @override
  Widget build(BuildContext context) {
    var paddingTop = MediaQuery.of(context).padding.top;
    return Scaffold(
      backgroundColor: Color(0xFFEFEFF4),
      body: Stack(
        children: [
          Container(
            color: Colors.white,
            height: paddingTop + 58 + 34,
            // padding: EdgeInsets.only(left: 15, right: 15, top: paddingTop + 12,bottom: 46),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: SearchView(),
                ),
                SizedBox(
                  height: 46,
                )
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: paddingTop + 70),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: ListView(
                    padding: EdgeInsets.zero,
                    physics: BouncingScrollPhysics(
                        parent: AlwaysScrollableScrollPhysics()),
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        child: AspectRatio(
                          child: Placeholder(),
                          aspectRatio: 345 / 149.5,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(vertical: 13),
                        padding: EdgeInsets.symmetric(horizontal: 15),
                        child: Row(
                          children: [
                            Image.asset(
                              R.image.icon_ad().assetName,
                              fit: BoxFit.fitHeight,
                              height: 18.5,
                            ),
                            SizedBox(
                              width: 15,
                            ),
                            Text(
                              '热烈庆祝人人购商城上线！祝大家购物愉快！',
                              style: TextStyle(
                                  fontSize: 13, color: Color(0xFF828282)),
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        ),
                        height: 40,
                        color: Colors.white,
                      ),
                      GridView.count(
                        shrinkWrap: true,
                        padding: EdgeInsets.symmetric(horizontal: 14.5),
                        physics: NeverScrollableScrollPhysics(),
                        crossAxisCount: 4,
                        crossAxisSpacing: 6,
                        children: _gridData
                            .map((e) => Container(
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(12)),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Image.asset(
                                        e['icon'],
                                        width: 29,
                                        height: 29,
                                      ),
                                      SizedBox(
                                        height: 9,
                                      ),
                                      Text(
                                        e['title'],
                                        style: TextStyle(
                                            color: Color(0xFF333333),
                                            fontSize: 12),
                                      )
                                    ],
                                  ),
                                ))
                            .toList(),
                      ),
                      Container(
                        color: Colors.white,
                        margin: EdgeInsets.only(top: 8),
                        height: 44,
                        child: Row(
                          children: [
                            Expanded(
                                flex: 1,
                                child: Column(
                                  children: [
                                    Text('综合',
                                        style: TextStyle(
                                            color: Color(0xFF444444),
                                            fontWeight: FontWeight.bold,
                                            fontSize: 15)),
                                    Text('热门推荐',
                                        style: TextStyle(
                                            color: Color(0xFF5B5B5B),
                                            fontSize: 11))
                                  ],
                                )),
                            VerticalDivider(
                              width: 1,
                              indent: 14,
                              endIndent: 14,
                              color: Color(0xFF444444).withOpacity(0.1),
                              thickness: 1,
                            ),
                            Expanded(
                                flex: 1,
                                child: Center(
                                  child: Text(
                                    '佣金',
                                    style: TextStyle(
                                        color: Color(0xFF444444),
                                        fontWeight: FontWeight.bold,
                                        fontSize: 15),
                                  ),
                                )),
                            VerticalDivider(
                              width: 1,
                              indent: 14,
                              endIndent: 14,
                              color: Color(0xFF444444).withOpacity(0.1),
                              thickness: 1,
                            ),
                            Expanded(
                                flex: 1,
                                child: Center(
                                  child: Text(
                                    '佣金',
                                    style: TextStyle(
                                        color: Color(0xFF444444),
                                        fontWeight: FontWeight.bold,
                                        fontSize: 15),
                                  ),
                                )),
                            VerticalDivider(
                              width: 1,
                              indent: 14,
                              endIndent: 14,
                              color: Color(0xFF444444).withOpacity(0.1),
                              thickness: 1,
                            ),
                            Expanded(
                                flex: 1,
                                child: Center(
                                  child: Text(
                                    '佣金',
                                    style: TextStyle(
                                        color: Color(0xFF444444),
                                        fontWeight: FontWeight.bold,
                                        fontSize: 15),
                                  ),
                                )),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 10, vertical: 10.5),
                        child: Column(
                          children: List.generate(5, (index) => index)
                              .map((e) => _buildCard(e))
                              .toList(),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCard(var item) => Container(
        height: 241.5,
        margin: EdgeInsets.only(bottom: 10.5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
        ),
        child: Column(
          children: [
            SizedBox(
              height: 160.5,
              child: Stack(
                children: [
                  Placeholder(),
                  Align(
                    alignment: AlignmentDirectional.bottomStart,
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      width: double.infinity,
                      height: 34,
                      alignment: AlignmentDirectional.centerStart,
                      padding: EdgeInsets.symmetric(
                        horizontal: 10.5,
                      ),
                      child: Text(
                        '河南农家山上散养新鲜土鸡蛋自养 新鲜',
                        style: TextStyle(color: Colors.white, fontSize: 13),
                      ),
                    ),
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 14, left: 10, right: 35.5),
              child: Row(
                children: [
                  Text(
                    '券后价',
                    style: TextStyle(color: Color(0xFFA7A7A7), fontSize: 12),
                  ),
                  SizedBox(
                    width: 4,
                  ),
                  Text(
                    '￥',
                    style: TextStyle(color: Color(0xFFFF1212), fontSize: 11),
                  ),
                  Text(
                    '5.90',
                    style: TextStyle(color: Color(0xFFFF1212), fontSize: 21),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                    '原价',
                    style: TextStyle(color: Color(0xFF7F7F7F), fontSize: 11),
                  ),
                  Spacer(),
                  Text(
                    '已售3761件',
                    style: TextStyle(color: Color(0xFF7F7F7F), fontSize: 11),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, right: 11.5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    child: Text(
                      '券￥6',
                      style: TextStyle(color: Color(0xffEB9621), fontSize: 12),
                    ),
                    width: 63,
                    height: 21.5,
                    alignment: AlignmentDirectional.centerStart,
                    padding: EdgeInsets.only(left: 10.5),
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(R.image.icon_quan().assetName),
                            fit: BoxFit.fill)),
                  ),
                  Spacer(),
                  Container(
                    height: 30,
                    width: 100,
                    alignment: AlignmentDirectional.center,
                    decoration: BoxDecoration(
                      color: Color(0xFF3E3E3E),
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Text(
                      '分享赚',
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      );
}
